import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'

import styles from './InvoiceInfo.less'
import { ElForm } from 'element-ui/types/form'
@Component({})
export default class InvoiceInfo extends Vue {
  @Prop({ default: false }) private visible!: boolean
  @Prop({ default: {} }) private defaultData!: any

  private invoiceData: any = {
    orgName: '',
    licenseNumber: '',
  }

  private invoiceRule: any = {
    orgName: [
      {
        required: true,
        message: '请填写机构全称',
        trigger: ['change', 'blur'],
      },
    ],
    licenseNumber: [
      {
        required: true,
        message: '请填写统一社会信用代码',
        trigger: ['change', 'blur'],
      },
      {
        pattern: /^([0-9,A-Z,a-z]){18}$/,
        message: '统一社会信用代码格式不正确',
        trigger: ['blur', 'change'],
      },
    ],
  }

  // private invoiceTypeRadio = {
  // 	1: '电子发票',
  // 	2: '纸质发票',
  // }

  protected render(h: any) {
    return (
      <el-dialog
        class={styles.applyInvoice}
        title="发票信息"
        custom-class="custom-dialog"
        visible={this.visible}
        width="570px"
        close-on-click-modal={false}
        close-on-press-escape={false}
        closed={this.beforeClose}
        {...{
          on: { 'update:visible': this.visibleChange },
        }}
      >
        <p class={styles.tips}>
          （1）电子普通发票和纸质普通发票具备同等法律效力，可支持报销入账。
          <br />
          （2）支付完成后，可前往“我的订单”点击下载电子发票。
          <br />
          （3）UKey介质的物流费用发票将会以定额发票形式随UKey一同寄出，请注意查收。
          <br />
          （4）如有问题，请联系4000878198转3(政务服务专线)
        </p>
        <el-form
          ref="form"
          label-width="146px"
          {...{ props: { model: this.invoiceData, rules: this.invoiceRule } }}
        >
          {/* <el-form-item label="商品名称">
            天印电子签章软件
          </el-form-item> */}
          <el-form-item label="发票类型">增值税普票</el-form-item>
          <el-form-item label="发票介质">电子发票</el-form-item>

          <el-form-item label="发票抬头" prop="orgName">
            <el-input
              v-model={this.invoiceData.orgName}
              placeholder="请填写机构全称"
            />
          </el-form-item>
          <el-form-item
            class="el-form-item-max el-form-item-two"
            label="统一社会信用代码"
            prop="licenseNumber"
          >
            <el-input
              v-model={this.invoiceData.licenseNumber}
              placeholder="请填写统一社会信用代码"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            onClick={() => {
              this.$emit('visibleChange', false)
            }}
          >
            取消
          </el-button>
          <el-button
            type="primary"
            class="medium bg-color-blue"
            onClick={this.submit}
          >
            保存
          </el-button>
        </span>
      </el-dialog>
    )
  }

  private submit() {
    ;(this.$refs['form'] as ElForm) &&
      (this.$refs['form'] as ElForm).validate((val: any) => {
        if (val) {
          this.$emit('submit', this.invoiceData)
          // this.beforeClose();
          this.$emit('visibleChange', false)
        }
      })
    // this.$message.success('提交成功')
  }

  private beforeClose() {
    this.invoiceData.orgName = ''
    this.invoiceData.licenseNumber = ''
    ;(this.$refs['form'] as ElForm) &&
      (this.$refs['form'] as ElForm).clearValidate()
    this.$emit('visibleChange', false)
  }

  private sendVerifyCode() {}

  @Watch('visible')
  visibleHandler(val: boolean) {
    if (val) {
      this.invoiceData.orgName = this.defaultData.orgName
      this.invoiceData.licenseNumber = this.defaultData.orgCode
    }
  }

  @Emit('visibleChange')
  private visibleChange(val: boolean) {
    return val
  }
}
